@import "sApprovalInfo";
@mixin select_status($status){
  @if ($status == 'standby'){
    background-color: rgb(204,204,204);
    color: rgb(204,204,204);
  }@else if($status == 'agreed'){
    background-color: rgb(102,204,102);
    color: rgb(102,204,102);
  }@else if($status == 'approving'){
    background-color: #F2E07D;
    color: rgb(255,204,51);
  }@else if($status == 'withdraw'){
    background-color: rgb(0,153,255);
    color: rgb(0,153,255);
  }@else if($status == 'deny'){
    background-color: rgb(239,110,91);
    color: rgb(239,110,91);
  }
  font-weight: bold;
}
body{
  margin-bottom: 70px;
}
.back{
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 11px 5px;
  background-image: url(../images/report/zhixin_left_btn.png);
  background-size: 100% 100%;
}
.cross{
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 11px 5px;
  background-image: url(../images/report/zhixin_off_btn.png);
  background-size: 100% 100%;
}
.module{
  position: relative;
  .dashed{
    width: 1px;
    height: 22px;
    border-left: 1px dashed #303030;
    position: absolute;
    bottom: 46px;
    left: 50px;
  }
  .title{
    position: relative;
    height:60px;
    width:100%;
    border-bottom: 1px solid #bbb;
    padding:8px 20px;
    .person-img{
      float: left;
      width:45px;
      height: 45px;
      @include set_center(45px);
      border-radius:45px;
      background-color: rgb(0,153,255);
      color: #fff;
    }
    p{
      font-size:18px;
      float: left;margin-left: 10px;
      line-height: 45px;
      color:#303030;
      span{
        margin-left: 5px;
        color: #909090;
        font-size:14px;
      }
      span:first-child{
        margin-left: 25px;
      }
    }
    .status{
      position: absolute;
      top:8px;
      right:10px;
    }
    .standby{
      @include select_status('standby');
      background-color: transparent;
    }
    .agreed{
      @include select_status('agreed');
      background-color: transparent;
    }
    .approving{
      @include select_status('approving');
      background-color: transparent;
    }
    .withdraw{
      @include select_status('withdraw');
      background-color: transparent;
    }
    .deny{
      @include select_status('deny');
      background-color: transparent;
    }
  }

  .mui-input-row{
    font-size: 14px;
    border:none;
    label{
      width:17%;
      color:#303030;
    }
    .info{
      width: 75%;
        //overflow: hidden;
        //text-overflow: ellipsis;
        //display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

  }
  .mui-input-row:last-child{
    .info{
      margin-bottom: 10px;
      padding-bottom: 0;
    }
  }
}
.approver{
  p{
    margin-bottom: 0;
    width:100%;
    color:#303030;
    span{
      color:#909090;
    }
  }
  .add-approver{
    margin-right: 10px;
    float: none;
    .people{
      width:18%;
      margin: 0;
      float: left;
      position: relative;
      .date{
        position: absolute;
        top:11px;
        right:-7px;
        color: #909090;
      }
     .arrow{
       width: 30px;
       height: 45px;
       @include set_center(30px);
      }
      .approver-img{
        float: left;
      }
    }
    .people_status{
      @extend .people;
      width:82%;
      p:first-child{
        margin: 4px 0;
      }
      p{
        width:auto;
        text-align: left;
        span{
          font-size:14px;
          //margin-left: 5px;
        }
        span~span{
          margin-left: 5px;
        }
        .agreed{
          color:rgb(127,194,104);
        }
        .deny{
          color:rgb(238,138,54);
        }
        .standby{
          color:#909090;
        }
      }
      .isAgree{
        font-size:14px;
      }
    }
  }
  .add-approver:last-child{
    padding-bottom:10px;
  }
}
.carbonCopy{
  border:none;
  min-height:40px;
  .add-approver {
    padding-bottom: 10px;
    float: left;

  }
}
.approve_footer{
  display:flex;
  justify-content: space-around;
  padding:8px 0;
  .submit-btn{
    width:30%;
    margin:0 6px;
    background-color: rgb(0,153,255);
    float: left;
    color: #fff;
    border-radius:44px;
    button{
      background-color: transparent;
      width:100%;
      padding:0;
      @include set_center(30px);
      margin: 0;
      font-size: 20px;
      border:none;
    }

    button:focus{
      background-color: transparent;
      border:none;
      border-right:1px solid #fff;
    }
  }
  .comment-btn{
    @extend .submit-btn;
    width:100%;
  }
}
.comment_block{
  @extend .module;
  min-height: 90px;
  .comment{
    @extend .title;
    height:60px;
    border:0;
    h5{
      font-weight: normal;
    }
    p{
      line-height:25px;
      width:80%;
      margin-bottom: 0;
      span{
        color:#909090;
        margin-right: 5px;
      }
    }
  }
}
.totalStatus{
  width:120px;
  height:120px;
  position: absolute;
  //background-color: #ddd;
  //border-radius: 70px;
  right:18px;
  top:60px;
  background-size:100% 100%;
}
.flex-text-wrap{
    position:relative;
    outline: 0;
    margin: 0;
    border: none;
    padding: 0;
   }
.flex-text-wrap pre{
      visibility: hidden;
      display: block;
      white-space:pre-wrap;
      min-height: 20px;
      padding:0;
      margin:0;
      }
textarea, .flex-text-wrap pre {
  width: calc(100% - 105px);
  line-height: 21px;
  font-size: 14px;
  min-height: 42px;
  margin:0;}
.approver-review{
  padding:15px 0 0 20px;
  min-height:60px;
  .submit-review-btn{
    width:80px;
    height:35px;
    border-radius:40px;
    margin:10px 20px 15px 0;
    position:absolute;
    right:0;
    top:0;
    padding:0;
  }
  .review-advice-content{
    background:transparent;
    width: calc(100% - 105px);
    border:none;
    padding:0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    resize: none;
  }
}
.mui-content-review{
  margin-top:50px;
}
.add-approver>.my-approver>.dashed{
    position:absolute;
    width: 1px;
    height: 27px;
    border-left: 1px dashed #303030;
    bottom: 53px;
    left: 30px;
  }
.approver .comment .review-myStyle{
  margin-left:15px;
}
.approver .comment .review-myStyle p:first-child{
  font-size:15px;
  line-height:15px;
  color: #909090
}
.approver .comment .review-myStyle p:last-child{
  right:-30px;
  font-size:14px;
}
body{
  line-height: 18px;
}
.approver .comment{
  min-height: 55px;
}
.info {
  padding: 9px 0;
  color:#909090;
}
.approver p, .carbonCopy p {
  color: #333;
  font-size: 15px;
}

.textarea-review{
padding:10px 0 0 15px;
}
.textarea-review textarea{
  padding:0;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  resize: none;
  border:none;
  background:transparent;
  box-sizing: border-box;
}
.flex-text-wrap pre{
  white-space:pre-wrap;
  display: block;
  visibility: hidden;
  width:calc(100% - 105px);;
}
.flex-text-wrap{
  position:relative;
}
.flex-text-wrap pre,textarea{
  line-height: 21px;
  font-size: 14px;
  min-height: 42px;
  margin:0;
}
//*************review height auto*******************
.rt{
  float:right;
}
.lf{
  float:left;
}
.approver>div.comment>div{
  float:none;
  height:100%;
  padding-top:1px;
}
.approver .comment .review-myStyle p:first-child{
  font-size:14px;
}
.approver>div.comment>div.review-myStyle{
  margin:0;

}
.approver .add-approver{
  margin-right:0;
}
.approver>.add-approver>.people_status>p.dates{
  top:11px;
}
.approver>p.review{
  margin-bottom:10px;
}
.isAgree{
  height:100%;
  overflow:hidden;
}

